<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wfEditor</title>
    <link rel="stylesheet" href="../../../libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../libs/fontawesome/4.2.0/css/font-awesome.min.css">
    <script src="../../../libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
    <script src="../../../libs/require.js/2.1.11/require.min.js"></script>
    <style>
        html, body{
            padding: 0;
            overflow: hidden;
        }
        .tab-pane{
            padding: .5em;
        }
        #upload{
            position: relative;
        }
        .audio-thumbnail{
            max-width: 60%;
            max-height: 150px;
        }
        .bg{
            display: block;
            width: 100%;
            height: 100%;
            background: none;
            border: 0;
        }
        .list{
            padding: 0;
            overflow: hidden;
        }
        .list li{
            float: left;
            width: 24%;
            padding: 4px 0;
            list-style: none;
        }
        .list li audio{
            width: 90%;
            height: 80px;
            border: 2px solid transparent;
            cursor: pointer;
        }
        .list li audio.audio-view{
            border: 2px solid #428bca;
        }
        #search-list{
            height: 200px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#upload">本地上传</a></li>
        <li><a href="#insert">远程音乐</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane active" id="upload">
            <div class="form-group">
                <button type="button" class="btn btn-info music-upload">点击上传</button>
            </div>
    
            <div class="form-group text-center">
                <audio class="audio-view" title="" src="../../../f2e/zuiqingfeng.mp3" controls></audio>
            </div>
            
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">描述</div>
                    <input type="txt" class="form-control audio-desc" placeholder="请输入音乐描述">
                </div>
            </div>
        </div>

        <div class="tab-pane" id="insert">
            <div class="form-group">
                <input type="text" class="form-control music-input" placeholder="直接粘贴音乐地址"/>
            </div>
    
            <div class="form-group text-center">
                <audio class="audio-view" title="" src="../../../f2e/zuiqingfeng.mp3" controls></audio>
            </div>
            
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">描述</div>
                    <input type="txt" class="form-control audio-desc" placeholder="请输入音乐描述">
                </div>
            </div>
        </div>

      </div>

    </div>

<script>
require.config({
    baseUrl: "../../",
    paths: {
        "wf": "../node_modules/wfquery/js/wfQuery"
    }
});

require(["wf","util/frameUpload/index","util/template-init"], function($, FrameUpload, T){

    var audioBtn = $(".music-upload"),
        audioInput = $(".music-input");

    $(".nav-tabs").on("click", "li>a",function(e){
        e.preventDefault();
        var t = $(this), 
            p = t.parent();
        p.addClass("active").siblings().removeClass("active");
        $( t.attr("href") ).addClass("active").siblings().removeClass("active");
    });

    var btn = $(".nav-tabs [href='#insert']"),
        audioView = $("#insert .audio-view"),
        title = $("#insert .audio-desc"),
        src = $("#insert .music-input");
    window.editMusic = function(audio){
        btn.trigger("click");
        audioView.attr({
            src: audio.src,
            title: audio.title
        });
        title.val( audio.title );
        src.val( audio.src );
    };

    /*直接粘贴*/
    audioInput.on("blur", function(){
        if(this.value){
            $(".active .audio-view").attr({
                src: this.value
            });
        }
    });

    /* 上传 */
    var uploadUrl = '../../../f2e/imageUpload.json';

    var uploader = new FrameUpload({
        el: audioBtn[0],
        ajax: true,
        action: uploadUrl,
        onchange: function(){
            this.submit();
            audioBtn.html("上传中..");
        },
        afterUpload: function(data){
            audioBtn.html("上传音乐");
            if( data.state === "SUCCESS" ){
                $(".active .audio-view").attr({
                    src: data.url.original
                });

            }else{
                alert( "上传失败" );
            }
        }
    });

    /*添加描述*/
    $(".audio-desc").on("change", function(){
        $(".active .audio-view").attr({
            title: this.value
        });
    });

});
// require(["base/index"]);
</script>
</body>
</html>